<template>
  <div>
    <div class="listBox">
      <noMore v-if="listData.length == 0"></noMore>
      <div class="invitationBox" v-for="(item,index) in listData" :key="index">
        <!-- //有图 -->
        <div v-if="item.recommendtype == '珠海港圈'|| item.recommendtype == '创新建议'">
          <div class="flexBox">
            <div class="leftImg">
              <el-image
                style="width: 123px; height: 123px"
                :src="item.articleid.articleimg"
                fit="cover"
              ></el-image>
            </div>
            <div>
              <div
                class="invitationBoxTitle"
                @click="toZhuHaiDetails(item.articleid)"
              >{{item.articleid.articlename}}</div>
              <div class="invitationBoxSubTitle">{{item.articleid.textReplace}}</div>
              <div class="invitationBoxBottom">
                <div class="invitationBoxBottomItem">{{item.articleid.reading}} 次阅读</div>
                <div class="invitationBoxBottomItem">{{item.articleid.reply}} 回复</div>
                <div class="invitationBoxBottomItem">{{item.articleid.praiseSize}} 赞</div>
                <div>{{item.articleid.aeticletype}}</div>
              </div>
            </div>
          </div>
          <el-divider></el-divider>
        </div>

        <!-- //无图 -->
        <div v-if="item.recommendtype == '资源共享'">
          <div class="flexBox2">
            <div>
              <div
                class="invitationBoxTitle"
                @click="toResourceDetails(item.resourceid)"
              >{{item.resourceid.resourcename}}</div>
              <div class="invitationBoxSubTitle">{{item.resourceid.textReplace}}</div>
              <div class="invitationBoxBottom">
                <div class="invitationBoxBottomItem">{{item.resourceid.reading}} 次阅读</div>
                <div class="invitationBoxBottomItem">{{item.resourceid.reply}} 回复</div>
                <div class="invitationBoxBottomItem">{{item.resourceid.praiseSize}} 赞</div>
                <div class="invitationBoxBottomItem">{{item.resourceid.aeticletype}}</div>
              </div>
            </div>
          </div>
          <el-divider></el-divider>
        </div>

        <!-- //问题 -->
        <div v-if="item.recommendtype == '互帮互助'">
          <div class="flexBox2">
            <div>
              <div
                class="invitationBoxTitle"
                @click="toHelpDetails(item.problemid)"
              >{{item.problemid.problemname}}</div>
              <div class="invitationBoxSubTitle">{{item.problemid.textReplace}}</div>
              <div class="invitationBoxBottom">
                <div class="invitationBoxBottomItem">{{item.problemid.reading}} 次阅读</div>
                <div class="invitationBoxBottomItem">{{item.problemid.reply}} 回答</div>
                <div class="invitationBoxBottomItem">互帮互助</div>
              </div>
            </div>
          </div>
          <el-divider></el-divider>
        </div>
        <!-- //问卷 -->
        <div v-if="item.recommendtype == '问卷调查'">
          <div class="flexBox2">
            <div>
              <div
                class="invitationBoxTitle"
                @click="ToQuestion(item.questionid._id)"
              >{{item.questionid.title}}</div>
              <div class="invitationBoxSubTitle">{{item.questionid.describe}}</div>
              <div class="invitationBoxBottom">
                <div class="invitationBoxBottomItem">{{item.recommendtype}}</div>
                <!-- <div class="invitationBoxBottomItem">{{item.questionid.reply}} 回答</div> -->
              </div>
            </div>
          </div>
          <el-divider></el-divider>
        </div>
        <!-- //投票 -->
        <div v-if="item.recommendtype == '工作投票'">
          <div class="flexBox2">
            <div>
              <div
                class="invitationBoxTitle"
                @click="ToVoint(item.voteid._id)"
              >{{item.voteid.title}}</div>
              <div class="invitationBoxSubTitle">{{item.voteid.describe}}</div>
              <div class="invitationBoxBottom">
                <div class="invitationBoxBottomItem">{{item.recommendtype}}</div>
                <!-- <div class="invitationBoxBottomItem">{{item.voteid.reply}} 回答</div> -->
              </div>
            </div>
          </div>
          <el-divider></el-divider>
        </div>
      </div>
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :page-size="limitSize"
        layout="prev, pager, next, jumper"
        :total="articleSize"
        :current-page.sync="currentPage"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { get_recommend } from "@/api/recommend";
import noMore from "@/components/noMore";
export default {
  data() {
    return {
      listData: [],
      skipSize: 0, //开始位置
      articleSize: 0, //总文章
      limitSize: 10,
      currentPage: 1
    };
  },
  components: {
    noMore
  },
  created() {
    this.get_tuiJian();
  },
  methods: {
    async get_tuiJian() {
      let tuiJianData = await get_recommend({
        query: {
          Adshow: true
        },
        skip: this.skipSize,
        limit: this.limitSize,
        count: true,
        populate: JSON.stringify([
          {
            path: "articleid"
          },
          {
            path: "problemid"
          },
          {
            path: "questionid"
          },
          {
            path: "resourceid"
          },
          {
            path: "voteid"
          }
        ])
      });
      console.log("推荐列表：", tuiJianData.data);
      this.listData = tuiJianData.data;
      this.articleSize = tuiJianData.countnum;
    },
    handleCurrentChange(val) {
      this.skipSize = (val - 1) * this.limitSize;
      console.log(`当前页: ${val}`);
      this.get_tuiJian();
    },
    toZhuHaiDetails(item) {
      if (item.aeticletype == "珠海港圈") {
        this.$router.push({
          path: "/zhuhaiPortCircleDetails",
          query: {
            article_id: item._id
          }
        });
      } else {
        this.$router.push({
          path: "/proposalDetails",
          query: {
            article_id: item._id
          }
        });
      }
    },
    toHelpDetails(item) {
      this.$router.push({
        path: "/helpDetails",
        query: {
          problem_id: item._id
        }
      });
    },
    toResourceDetails(item) {
      this.$router.push({
        path: "/resourceSharingDetails",
        query: {
          article_id: item._id
        }
      });
    },
    ToVoint(val) {
      this.$router.push({
        path: "/Voting", //跳转路径
        // name: "Voting", //跳转路径的name值，不写跳转后页面取不到参数
        // 参数
        query: {
          _id: val
        }
      });
    },
    ToQuestion(val) {
      this.$router.push({
        path: "/Question", //跳转路径
        // name: "Question", //跳转路径的name值，不写跳转后页面取不到参数
        // 参数
        query: {
          _id: val
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
.listBox {
  .invitationBox {
    .flexBox {
      display: flex;
      .leftImg {
        margin-right: 20px;
      }
      .invitationBoxTitle {
        font-size: 23px;
        font-weight: 600;
        color: #333;
        margin-bottom: 15px;
        // width: 727px;
        overflow: hidden;
        text-overflow: ellipsis; //超出部分以省略号显示
        // white-space: nowrap;
        display: -webkit-box;
        -webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
        -webkit-box-orient: vertical;
        cursor: pointer;
        &:hover {
          color: #1d2f70;
          text-decoration: underline;
        }
      }
      .invitationBoxSubTitle {
        min-height: 40px;
        color: #6c6c6c;
        font-size: 17px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* 可以显示的行数，超出部分用...表示*/
        -webkit-box-orient: vertical;
      }
      .invitationBoxBottom {
        display: flex;
        margin-top: 14px;
        color: #b3b2b2;
        .invitationBoxBottomItem {
          margin-right: 18px;
          font-size: 14px;
        }
      }
    }
    .flexBox2 {
      .invitationBoxTitle {
        font-size: 23px;
        font-weight: 600;
        color: #333;
        margin-bottom: 15px;
        // width: 727px;
        overflow: hidden;
        text-overflow: ellipsis; //超出部分以省略号显示
        // white-space: nowrap;
        display: -webkit-box;
        -webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
        -webkit-box-orient: vertical;
        cursor: pointer;
        &:hover {
          color: #1d2f70;
          text-decoration: underline;
        }
      }
      .invitationBoxSubTitle {
        min-height: 40px;
        color: #6c6c6c;
        font-size: 17px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* 可以显示的行数，超出部分用...表示*/
        -webkit-box-orient: vertical;
      }
      .invitationBoxBottom {
        display: flex;
        margin-top: 14px;
        color: #b3b2b2;
        .invitationBoxBottomItem {
          margin-right: 18px;
          font-size: 14px;
        }
      }
    }
  }
}
</style>